import React ,{Component} from 'react'
import PropTypes from 'prop-types'
import { Upload, Icon, Modal, message } from 'antd'
import {reqDeleteImg} from '../../api'
import {BASE_IMG_URL} from "../../utils/constants";
/*
用于图片上传的组件
 */
export default class PicturesWall extends Component{

    static propTypes ={ 
        imgs:PropTypes.array
    }

    state = {
        previewVisible: false, // 标识是否显示大图预览Modal
        previewImage: '', // 大图的url
        fileList: [
          /*{
            uid: '-1', // 每个file都有自己唯一的id
            name: 'xxx.png', // 图片文件名
            status: 'done', // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', // 图片地址
          },*/
        ],
      }

      // 图片数组 从父组件传过来了 要更新 fileList值
      constructor(props){
         super(props)
         let fileList = [];
         // 如果传入了imgs属性
         const {imgs} = this.props;
         if(imgs && imgs.length>0){
            fileList = imgs.map((img,index)=>({
                uid:-index,  // 每个file都有自己唯一的id
                name:img,    // 图片文件名
                status:'done',  // // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
                url:BASE_IMG_URL + img  // 图片地址
            }))
         }
         // 更新初始化状态
         this.state={
            previewVisible: false, // 标识是否显示大图预览Modal
            previewImage: '', // 大图的url
            fileList    // 所有已上传图片的数组
         }
      }
       /*
        隐藏Modal
      */
        handleCancel = () => this.setState({ previewVisible: false });

        /*
         获取所有已上传图片文件名的数组  ['images-9200423tew9.png','images-9200423tew9.png','images-9200423tew9.png']
         */
        getImgs  = () => {
            return this.state.fileList.map(file => file.name)
        }

        handlePreview = file => {
            console.log('handlePreview()', file)
            // 显示指定file对应的大图
            this.setState({
            previewImage: file.url || file.thumbUrl,  // thumbUrl 图片没有上传成功 默认显示图片的base64 地址
            previewVisible: true,
            });
        };

        /*
        file: 当前操作的单个 图片文件(上传/删除)
        fileList: 所有已上传图片文件对象的数组
        */
        // 上传的图片对象 和 图片数组里最后一个元素 内容相同  但各自指向不同
        handleChange =async ({file,fileList})=>{
          console.log('handleChange()', file.status, fileList.length, file===fileList[fileList.length-1])
           
          // 一旦上传成功 把上传成功 自动生产的name 值改成后端存图片的名字
          // 自动生成name 值错了  另外给 file 添加一个url 属性  修改name 值 添加 url
          if(file.status ==='done'){
            const res = file.response; // {status: 0, data: {name: 'xxx.jpg', url: '图片地址'}}
            if(res.status===0){
                message.success('上传图片成功!')
                const {name,url} = res.data;
                const file2 = fileList[fileList.length-1]  // 内容相同的两个数组 指向2个地址 
                file2.name = name;
                file2.url = url;
            }else{
                message.error('上传图片失败')
            }
          }else if(file.status ==='removed'){  //删除图片
            const res = await reqDeleteImg(file.name)
            if(res.status===0){
                message.success('删除图片成功!')
            }else{
                message.error('删除图片失败!')
            }
          }
          
          // 在操作(上传/删除)过程中更新fileList状态
          this.setState({ fileList })
        }

     render(){
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
          <div>
            <Icon type="plus" />
            <div>Upload</div>
          </div>
        );

      return (
        <div>
            <Upload
            action="/manage/img/upload" /*上传图片的接口地址 接口地址前缀不要 要代理请求*/
            accept='image/*'  /*只接收图片格式*/
            name='image' /*请求接口参数名*/
            listType="picture-card"  /*卡片样式*/
            fileList={fileList}  /*所有已上传图片文件对象的数组*/
            onPreview={this.handlePreview}
            onChange={this.handleChange}
            >
              { /* uploadButton  上传无限张 */}
              {fileList.length >= 4 ? null : uploadButton}
            </Upload>
            <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
        </div>
      )
    }
}